<template>
  <div class="animated fadeIn">
    <!-- 需求列表 2018/3/5 18:49 zhangQ -->
    <Row>
      <i-col :md="24">
        <div>
          <div id="container" style="margin-bottom:10px;">
            <Button type="primary" size="large" icon="ios-cloud-upload-outline" id='pickfiles' @click="addRequirement"
                    style="padding-bottom:5px;" v-if="currentUser.role.indexOf('电厂') > -1">添加需求
            </Button>
            <!--
            <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                <span v-if="progresscount===100">上传成功</span>
                <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                <span v-if="progresstatus==='wrong'">上传失败</span>
                <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
            </Progress>
            -->
          </div>
          <Tabs value="daysPlan" @on-click="loadDaysPlan">
            <TabPane label="日计划" name="daysPlan">
              <div style="position:relative;">
                <!--
                <Table :columns="daysColumn" :data="daysplan_list" ref="table"></Table>
              -->
                <!--
                <v-table :columns="daysColumn" :table-data="daysplan_list" :show-vertical-border="false"
                         is-horizontal-resize style="width: 100%" :cell-edit-done="cellEditDaysDone"
                         @on-custom-comp="deleteDemandItem" @sort-change="sortChange"></v-table>
                       -->
                <!--
                <editable-table :columns-list="daysColumn" :table-data="daysplan_list" :saveEdit="saveEditInline" :deleteRow="deleteRowInline"></editable-table>
              -->
                <Table :columns="daysColumn" :data="daysplan_list"></Table>
                <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                          align-items: center;
                                          justify-content: center;background: rgba(210, 216, 222, 0.5);"
                     v-if="list_loadding">
                  <Spin size="large"></Spin>
                  <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
                </div>
              </div>

              <Page :total="this.pageTotal" show-total @on-change="setDaysPage"
                    style="text-align:right;margin-top:50px"></Page>
            </TabPane>

            <TabPane label="月计划" name="monthPlan">
              <div style="position:relative;">
                <!--
                <v-table :columns="monthColumn" :table-data="monthplan_list" :show-vertical-border="false"
                         is-horizontal-resize style="width: 100%" :cell-edit-done="cellEditMonthDone"
                         @on-custom-comp="deleteDemandItem" :multiple-sort="multipleSort"></v-table>
                        -->
                <!--<editable-table refs="table1" :columns-list="monthColumn" :table-data="monthplan_list" :saveEdit="saveEditInline" :deleteRow="deleteRowInline"></editable-table>
              -->
                <Table :columns="monthColumn" :data="monthplan_list"></Table>
                <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                          align-items: center;
                                          justify-content: center;background: rgba(210, 216, 222, 0.5);"
                     v-if="list_loadding">
                  <Spin size="large"></Spin>
                  <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
                </div>
              </div>

              <Page :total="this.pageMTotal" show-total @on-change="setMonthPage"
                    style="text-align:right;margin-top:50px"></Page>
            </TabPane>

          </Tabs>
          <!--
          <Button type="primary" size="large" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出原始数据
          </Button>
          <Button type="primary" size="large" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
            导出排序和过滤后的数据
          </Button>
        -->
        </div>
      </i-col>
    </Row>
    <Modal v-model="addRequirementModal" title="添加需求计划" @on-ok="handleSubmit('addForm')">
      <Form :model="addForm" :label-width="150" :rules="ruleValidate" ref="addForm">
        <FormItem label="货物名称" prop="productName">
          <Input v-model="addForm.productName" placeholder="请填写货物名称"></Input>
        </FormItem>
        <FormItem label="需求吨数" prop="demandNumber">
          <Input v-model="addForm.demandNumber" placeholder="需求吨数"></Input>
        </FormItem>
        <FormItem label="供应商" prop="sellerName">
          <Select v-model="addForm.sellerName">
            <Option v-for="item in options" :value="item.loginName" :key="item.loginName">
              {{item.loginName}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="计划类型" prop="type">
          <RadioGroup v-model="addForm.type">
            <Radio label="1">日需求</Radio>
            <Radio label="2">月需求</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="需求时间" prop="needTime">
          <DatePicker type="datetime" placeholder="选择需求时间" v-model="addForm.needTime"></DatePicker>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="refuseReasonModal" width="360" title="原因">
      <p>{{refuseReason}}</p>
    </Modal>
  </div>
</template>
<script>
  import { getDemandList, getMineCompanyList, addDemand, deleteDemand, editDemand, agreeRequirementsList } from '@api/backEnd/requirements'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  // import Cookies from 'js-cookie'

  export default {
    name: 'requirementsList',
    data () {
      return {
        multipleSort: false,
        addRequirementModal: false,
        refuseReasonModal: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        pageTotal: null,
        pageindex: 1,
        daysplan_list: [],
        monthplan_list: [],
        lodding: false,
        pageMTotal: null,
        list_loadding: false,
        date: null,
        refuseReason: null,
        addForm: {
          productName: '',
          demandNumber: '',
          sellerName: '',
          type: '',
          needTime: null
        },
        options: [],
        daysColumn: [
          {
            title: '需求时间',
            key: 'needTime',
            align: 'center'
          }, {
            title: '出售方',
            key: 'sellerName',
            align: 'center'
          }, {
            title: '货物名称',
            key: 'productName',
            align: 'center'
          }, {
            title: '需求量',
            key: 'demandNumber',
            align: 'center',
            editable: true
          }, {
            title: '需求方',
            key: 'purchaserName',
            align: 'center',
            editable: true
          }, {
            title: '操作',
            key: 'handle',
            width: 200,
            align: 'center',
            render: (h, params) => {
              const roles = this.currentUser.role
              if (roles.indexOf('电厂') > -1) {
                if (params.row.status === 1) {
                  return h('div', [
                    h('Tag', {
                      props: {
                        type: 'dot',
                        color: 'blue'
                      }
                    }, '已发送请求')
                  ])
                }
                if (params.row.status === 2) {
                  return h('div', [
                    h('Tag', {
                      props: {
                        type: 'dot',
                        color: 'green'
                      }
                    }, '已接受请求')
                  ])
                }
                if (params.row.status === 0) {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'ghost'
                      },
                      on: {
                        click: () => {
                          if (params.row.content !== null || params.row.content !== '') {
                            this.refuseReason = params.row.content
                          } else {
                            this.refuseReason = '未填写拒绝原因'
                          }
                          this.refuseReasonModal = true
                        }
                      }
                    }, '被拒,查看原因')
                  ])
                }
              } else if (roles.indexOf('矿企') > -1) {
                if (params.row.status === 1) {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          const id = params.row.id
                          const status = 2
                          const param = { id, status }
                          agreeRequirementsList(param).then(res => {
                            if (res.data.isSuccess === 1) {
                              this.$Message.success('已同意')
                              this.$router.push('/requirements')
                            } else {
                              this.$Message.error('操作失败，请重试')
                            }
                          })
                        }
                      }
                    }, '同意'),
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.$router.push({ path: '/requirements/requirementsList_reject/' + params.row.id })
                        }
                      }
                    }, '拒绝')
                  ])
                } else {
                  if (params.row.status === 2) {
                    return h('span', {
                      props: {
                        align: 'center'
                      }
                    }, '已同意')
                  }
                  if (params.row.status === 0) {
                    return h('span', {
                      props: {
                        align: 'center'
                      }
                    }, '已拒绝')
                  }
                }
              }
            }
          }
        ],
        monthColumn: [
          {
            title: '需求时间',
            key: 'needTime',
            align: 'center'
          }, {
            title: '出售方',
            key: 'sellerName',
            align: 'center'
          }, {
            title: '货物名称',
            key: 'productName',
            align: 'center'
          }, {
            title: '需求量',
            key: 'demandNumber',
            align: 'center'
          }, {
            title: '需求方',
            key: 'purchaserName',
            align: 'center',
            editable: true
          }, {
            title: '操作',
            key: 'handle',
            width: 200,
            align: 'center',
            render: (h, params) => {
              const roles = this.currentUser.role
              if (roles.indexOf('电厂') > -1) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'blue'
                    }
                  }, '已发送请求')
                ])
              } else if (roles.indexOf('矿企') > -1) {
                if (params.row.status === 1) {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          const id = params.row.id
                          const status = 2
                          const param = { id, status }
                          agreeRequirementsList(param).then(res => {
                            if (res.data.isSuccess === 1) {
                              this.$Message.success('已同意')
                              this.$router.push('/requirements')
                            } else {
                              this.$Message.error('操作失败，请重试')
                            }
                          })
                        }
                      }
                    }, '同意'),
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.$router.push({ path: '/requirements/requirementsList_reject/' + params.row.id })
                        }
                      }
                    }, '拒绝')
                  ])
                } else {
                  if (params.row.status === 2) {
                    return h('span', {
                      props: {
                        align: 'center'
                      }
                    }, '已同意')
                  }
                  if (params.row.status === 0) {
                    return h('span', {
                      props: {
                        align: 'center'
                      }
                    }, '已拒绝')
                  }
                }
              }
            }
          }
        ],
        ruleValidate: {
          productName: [
            { required: true, message: '品名不能为空', trigger: 'blur' }
          ],
          demandNumber: [
            { required: true, message: '需求吨数不能为空', trigger: 'blur' }
          ],
          sellerName: [
            { required: true, message: '供应商不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '必须选择计划类型', trigger: 'blur' }
          ],
          needTime: [
            { required: true, message: '必须选择需求时间', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['currentUser', 'activeMenu'])
    },
    methods: {
      saveEditInline () {
      },
      deleteRowInline () {
      },
      sortChange (params) {
      },
      deleteDemandItem (params) {
        deleteDemand(params.rowData.id).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info('删除成功')
            if (params.rowData.type === 1) {
              this.setDaysPage(1)
            } else {
              this.setMonthPage(1)
            }
          }
        })
      },
      cellEditDaysDone (newValue, oldValue, rowIndex, rowData, field) {
        this.daysplan_list[rowIndex][field] = newValue
        const demandNumber = newValue
        const type = rowData.type
        const sellerName = rowData.sellerName
        const id = rowData.id
        const productName = rowData.productName
        const needTime = rowData.needTime
        const param = { id, type, sellerName, productName, demandNumber, needTime }
        editDemand(param).then(res => {
          if (res.isSuccess === 1) {
            this.$Message.info('修改成功!')
          }
        })
      },
      cellEditMonthDone (newValue, oldValue, rowIndex, rowData, field) {
        this.monthplan_list[rowIndex][field] = newValue
        const demandNumber = newValue
        const type = rowData.type
        const sellerName = rowData.sellerName
        const id = rowData.id
        const productName = rowData.productName
        const needTime = rowData.needTime
        const param = { id, type, sellerName, productName, demandNumber, needTime }
        editDemand(param).then(res => {
          if (res.isSuccess === 1) {
            this.$Message.info('修改成功!')
          }
        })
      },
      handleSubmit () {
        this.addForm.needTime = moment(this.addForm.needTime).format('YYYY-MM-DD HH:mm:ss')
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            addDemand(this.addForm).then(res => {
              if (res.data.isSuccess === 1) {
                this.$Message.info('添加成功')
                this.setDaysPage(1)
                this.setMonthPage(1)
                this.addForm = {
                  productName: '',
                  demandNumber: '',
                  sellerName: '',
                  type: '',
                  needTime: null
                }
              }
            })
          }
        })
      },
      addRequirement () {
        this.addRequirementModal = true
        getMineCompanyList().then(res => {
          if (res.data.isSuccess === 1) {
            this.options = res.data.data
          }
        })
      },
      loadDaysPlan (name) {
        if (name === 'daysPlan') {
          this.setDaysPage(1)
        } else {
          this.setMonthPage(1)
        }
      },
      setDaysPage (page) {
        const type = 1
        const param = { type, page }
        getDemandList(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.daysplan_list = res.data.data.list
            this.pageTotal = res.data.data.total
          }
        })

        this.pageindex = page
      },
      setMonthPage (page) {
        const type = 2
        const param = { type, page }
        getDemandList(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.monthplan_list = res.data.data.list
            this.pageMTotal = res.data.data.total
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      this.setDaysPage(1)
      this.setMonthPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
